<h3>Static</h3>
<div class="row">
  <div class="col-sm-4">
    <progressbar value="55"></progressbar>
  </div>
  <div class="col-sm-4">
    <progressbar class="progress-striped" value="22" type="warning">22%</progressbar>
  </div>
  <div class="col-sm-4">
    <progressbar class="progress-striped active" max="200" value="166" type="danger"><i>166 / 200</i></progressbar>
  </div>
</div>

<hr/>
<h3>Dynamic
  <button type="button" class="btn btn-sm btn-primary" (click)="random()">Randomize</button>
</h3>
<progressbar [max]="max" [value]="dynamic"><span style="color:white; white-space:nowrap;">{{dynamic}} / {{max}}</span>
</progressbar>

<small><em>No animation</em></small>
<progressbar [animate]="false" [value]="dynamic" type="success"><b>{{dynamic}}%</b></progressbar>

<small><em>Object (changes type based on value)</em></small>
<progressbar class="progress-striped active" [value]="dynamic" [type]="type">{{type}} <i *ngIf="showWarning">!!!
  Watch out !!!</i></progressbar>

<hr/>
<h3>Stacked
  <button type="button" class="btn btn-sm btn-primary" (click)="randomStacked()">Randomize</button>
</h3>
<bs-progress>
  <bar *ngFor="let baz of stacked" [value]="baz.value" [type]="baz?.type">
    <span *ngIf="baz.value > 5">{{baz?.value}}%</span>
  </bar>
</bs-progress>
